<template>
  <div>
    <NavBar>
      <template v-slot:title>
        <div class="hot">热推</div>
        <van-icon name="fire" color="red"></van-icon>
      </template>
      <template v-slot:right>
        <van-icon name="search" @click="search_view()"></van-icon>
      </template>
    </NavBar>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <div class="focus">
        <InfoBoxVue
          class="info_box"
          v-for="(item, index) in list"
          :key="index"
          @click="detailInfo(item.uid, item.pid)"
        >
          <template v-slot:img>
            <van-image
              fit="contain"
              radius="6 6 0 0"
              :src="item.imageUrl"
              alt="fail"
              class="img"
            ></van-image>
          </template>
          <template v-slot:title>{{ item.title }}</template>
          <template v-slot:head_img>
            <van-image
              round
              class="head_img"
              width="20"
              height="20"
              :src="item.headUrl"
            ></van-image>
          </template>
          <template v-slot:author_name>{{ item.name }}</template>
          <template v-slot:like
            ><van-icon
              v-if="item.isactive == 'false'"
              name="like-o"
              color="red"
            ></van-icon>
            <van-icon name="like" color="red" v-else></van-icon>
          </template>
          <template v-slot:like_cnt>{{ item.likes }}</template>
        </InfoBoxVue>
        <div class="list_bottom_txt">没有更多了~</div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";
import InfoBoxVue from "../../components/Home/InfoBox.vue";
import NavBar from "../../components/NavBar.vue";
export default {
  data() {
    return {
      count: 0,
      isLoading: false,
      list: [],
    };
  },
  created() {
    //按照点赞降序排列
    var item = JSON.parse(localStorage.getItem("find"));
    for (var i = 0; i < item.length; i++) {
      for (var j = i + 1; j < item.length; j++) {
        if (item[i].likes < item[j].likes) {
          var op;
          op = item[i];
          item[i] = item[j];
          item[j] = op;
        }
      }
    }
    this.list = item;
  },
  components: { InfoBoxVue, NavBar },
  methods: {
    search_view() {
      this.$router.push("/home/search");
    },
    onRefresh() {
      setTimeout(() => {
        // Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    detailInfo(uid, pid) {
      this.$router.push("/home/detailinfo/" + uid + "/" + pid);
    },
  },
};
</script>

<style scoped>
.hot {
  color: red;
  display: inline;
  margin-right: 5px;
  font-size: 18px;
  font-family: "Gill Sans", sans-serif;
}
.focus {
  margin: 50px 10px 80px 8px;
  width: 95%;
  height: 100%;
  line-height: 20px;
  text-align: center;
}
.info_box {
  /* margin-top: 10px; */
  height: 100%;
  break-inside: avoid;
}
.img {
  width: 100%;
  border-radius: 6px 6px 0 0;
}
.head_img {
  margin-left: 10px;
  width: 20px;
  height: 20px;
  line-height: 30px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(187, 187, 187, 100);
}
.list_bottom_txt {
  margin-top: 30px;
}
</style>
